<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset='utf8' />
		<meta http-equiv="X-UA-Compatible" content="chrome=1" />
		<title>SVG Tree Drawer Example</title>
		<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
		<script>
		if(!window.console){
			var console = {
				info:function(){},
				error:function(){},
				warn:function(){}
			}
		}
		</script>
		<!--<script src="../svgweb/src/svg-uncompressed.js" data-path="../svgweb/src"></script>-->
		<script src="../svg-tree-drawer.js"></script>
		<script src="helpers.js"></script>
	</head>
	<body>
		<h1>SVG Tree Drawer Example</h1>
		<p>
			Examples:
			<a href="#eyJyb290Ijp7ImxhYmVsIjoiUyIsImNvbGxhcHNlZCI6ZmFsc2UsImNoaWxkcmVuIjpbYCBBJU5QYCA+KXRydWAgMzNEYCBMRVRoZWAhMC59XX0sYCEvJk9NYCE8RmAhaEVib3lgISYxXWAhMilWYCIwRVZgIyZFcGxheXNgISU2YCQ+IVN0eWxlIjp7ImZvbnRTaXplIjoxNSwiZG9taW5hbnRCYXNlbGluZSI6Im1pZGRsZSIsInRleHRBbmNob3JgIConcGFkZGluZ1RvcCI6MTBgICckTGVmdGAgJChCb3R0b21gIDcoUmlnaGAgQCB9LCJicmFuY2hgIU0kaGVgIDUiNSwic3Ryb2tlV2lkdGgiOjJgICgjIjoicmVkIn19">one</a>,
			<a href="#eyJyb290Ijp7ImxhYmVsIjoiUyIsImNvbGxhcHNlZCI6ZmFsc2UsImNoaWxkcmVuIjpbYCBBJU5QYCA+KXRydWAgMzNEYCBMRVRoZWAhMC59XX0sYCEvJk9NYCE8RmAhaEVib3lgISYxXWAhMilWYCIwRVZgIyZFcGxheXNgISU2YCQ+IVN0eWxlIjp7ImZvbnRTaXplIjozNSwiZG9taW5hbnRCYXNlbGluZSI6Im1pZGRsZSIsInRleHRBbmNob3JgIConcGFkZGluZ1RvcCI6MTBgICckTGVmdGAgJChCb3R0b21gIDcoUmlnaGAgQCB9LCJicmFuY2hgIU0kaGVgIDYhMzUsInN0cm9rZVdpZHRoIjoyYCAoIyI6ImJsdWUifX0=">two</a>,
			<a href="#eyJyb290Ijp7ImxhYmVsIjoiUyIsImNvbGxhcHNlZCI6ZmFsc2UsImNoaWxkcmVuIjpbYCBBJU5QYCA+KXRydWAgMzNEYCBMRVRoZWAhMC59XX0sYCEvJk9NYCE8RmAhaEVib3lgISYxXWAhMilWYCIwRVZgIyZFcGxheXNgISU2YCQ+IVN0eWxlIjp7ImZvbnRTaXplIjoyNSwiZG9taW5hbnRCYXNlbGluZSI6Im1pZGRsZSIsInRleHRBbmNob3JgIConcGFkZGluZ1RvcCI6MTBgICckTGVmdGAgJChCb3R0b21gIDcoUmlnaGAgQCB9LCJicmFuY2hgIU0kaGVgIDYhMjUsInN0cm9rZVdpZHRoIjoyYCAoIyI6ImJsYWNrIn19">three</a>
		</p>
		
		<div id="treeContainer">
			<p><em>Please wait…</em></p>
		</div>
			
		<style>
		math mtd {
			text-align:left;
		}
		div.math {
			display:inline-block;
		}
		</style>
		
		
		<div id="math1" class='math'><math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
			<mrow>
				<mfenced open='[' close=']'>
					<mtable>
						<mtr>
							<mtd><mi style="font-style:italic">word</mi></mtd>
						</mtr>
						
						<mtr>
							<mtd><mi>HEAD</mi></mtd>
							<mtd>
								
								<mfenced open='[' close=']'>
									<mtable>
										<mtr>
											<mtd columnspan="2"><mi style='font-style:italic'>prep</mi></mtd>
										</mtr>
									</mtable>
								</mfenced>
								
							</mtd>
						</mtr>
						<mtr>
							<mtd><mi>VAL</mi></mtd>
							<mtd>
								
								<mfenced open='[' close=']'>
									<mtable>
										<mtr>
											<mtd><mtext>COMPS</mtext></mtd>
											<mtd>
												<mfenced open='〈' close='〉' separators="&#8199;">
												</mfenced>
											</mtd>
										</mtr>
										<mtr>
											<mtd><mtext>SPR</mtext></mtd>
											<mtd>
												<mfenced open='〈' close='〉' separators="&#8199;">
												</mfenced>
											</mtd>
										</mtr>
									</mtable>
								</mfenced>
								
							</mtd>
						</mtr>
					</mtable>
				</mfenced>
			</mrow>
		</math></div>
		
		
		
		<div id="math2" class='math'><math display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
			<mrow>
				<mfenced open='[' close=']'>
					<mtable>
						<mtr>
							<mtd><mi style="font-style:italic">word</mi></mtd>
						</mtr>
						
						<mtr>
							<mtd><mi>HEAD</mi></mtd>
							<mtd>
								
								<mfenced open='[' close=']'>
									<mtable>
										<mtr>
											<mtd columnspan="2"><mi style='font-style:italic'>prep</mi></mtd>
										</mtr>
									</mtable>
								</mfenced>
								
							</mtd>
						</mtr>
						<mtr>
							<mtd><mi>VAL</mi></mtd>
							<mtd>
								
								<mfenced open='[' close=']'>
									<mtable>
										<mtr>
											<mtd><mtext>COMPS</mtext></mtd>
											<mtd>
												<mfenced open='〈' close='〉' separators="&#8199;">
												</mfenced>
											</mtd>
										</mtr>
										<mtr>
											<mtd><mtext>SPR</mtext></mtd>
											<mtd>
												<mfenced open='〈' close='〉' separators="&#8199;">
												</mfenced>
											</mtd>
										</mtr>
									</mtable>
								</mfenced>
								
							</mtd>
						</mtr>
					</mtable>
				</mfenced>
			</mrow>
		</math></div>
		
		
		<div id="math3" class='math'><math  display="inline" xmlns="http://www.w3.org/1998/Math/MathML">
			<mrow>
				<mfenced open='[' close=']'>
					<mtable>
						<mtr>
							<mtd><mi style="font-style:italic">word</mi></mtd>
						</mtr>
						
						<mtr>
							<mtd><mi>HEAD</mi></mtd>
							<mtd>
								
								<mfenced open='[' close=']'>
									<mtable>
										<mtr>
											<mtd columnspan="2"><mi style='font-style:italic'>adj</mi></mtd>
										</mtr>
									</mtable>
								</mfenced>
								
							</mtd>
						</mtr>
						<mtr>
							<mtd><mi>VAL</mi></mtd>
							<mtd>
								
								<mfenced open='[' close=']'>
									<mtable>
										<mtr>
											<mtd><mtext>COMPS</mtext></mtd>
											<mtd>
												<mfenced open='〈' close='〉' separators="&#8199;">
													<mi>PP</mi>
													<mfenced open='[' close=']' separators="&#8199;">
														<mi>HEAD</mi>
														<mi style="font-style:italic">prep</mi>
														<ms>of</ms>
													</mfenced>
												</mfenced>
											</mtd>
										</mtr>
										<mtr>
											<mtd><mtext>SPR</mtext></mtd>
											<mtd>
												<mfenced open='〈' close='〉' separators="&#8199;">
												</mfenced>
											</mtd>
										</mtr>
									</mtable>
								</mfenced>
								
							</mtd>
						</mtr>
					</mtable>
				</mfenced>
			</mrow>
		</math>
		</div>
		
		
		<script>
		//<![CDATA[
		//obj.setAttribute('data', 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
		
		
		
		var treeData3 = {
			root: {
				label:'S',
				children:[
					{
						label:'NʃP',
						__sslabel:(function(){
							var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
							var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
							line.setAttribute('style', 'fill:cyan; stroke:red; stroke-width:3px; padding:0!important;');
							line.setAttribute('width', 400);
							line.setAttribute('height', 50);
							g.appendChild(line)
							return g;
						})(),
						children:[
							{
								label:(function(){
									var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
									rect.setAttribute('style', 'fill:cyan; stroke:red; stroke-width:3px; padding:10px; padding-left:100px;');
									rect.setAttribute('width', 400);
									rect.setAttribute('height', 50);
									return rect;
								})(),
								children:[
									{
										label:'N',
										children:[
											{label:document.getElementById('math1')}
										]
									},
									{
										label:'D',
										children:[
											{label:document.getElementById('math2')}
										]
									},
									{
										label:'D',
										children:[
											{label:document.getElementById('math3')}
										]
									}
								]
							}
						]
					},
					{
						label:'VP',
						children:[
							{
								label:'PP',
								children:[
									{
										label:'NP',
										children:[
											{
												label:'NOM',
												children:[
													{
														label:'N',
														children:[
															{label:'Toukyou'},
															{label:'food rules!'}
														]
													}
												]
											}
										]
									},
									{
										label:(function(){
											var obj = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
											obj.setAttribute('style', 'fill:cyan; stroke:red; stroke-width:3px; ');
											//obj.setAttribute('width', 400);
											obj.setAttribute('r', 50);
											return obj;
										})(),
										children:[
											{label:'e'}
										]
									}
								]
							},
							{
								label:'Vksjdkahdkahsdkjahsdkjahsdkjahskjahskdjh',
								children:[
									{label:'i'},
									{
										label:'iasdasdasdasdasdasd',
										children:[
											{label:'e'},
											{label:'e'},
											{label:'e'},
											{label:'easdasdasdas'}
										]
									
									}
								]
							}
						]
					}
				]
			}
		};
		
		
		var data = treeData3;
		
		/**
		 * Get tree data that has been saved in location.hash
		 */
		function parseHash(){
			var hash = window.location.hash.substr(1);
			if(hash){
				try {
					var toParse = decode64(hash);
					var hashdata;
					try {
						hashdata = JSON.parse(toParse);
					}
					//Try decompressing the hash just in case that's why it failed to parse
					catch(e){
						hashdata = JSON.parse(decompress(toParse))
					}
					if(hashdata)
						return hashdata;
				}
				catch(e){
					console.warn(toParse)
				}
			}
			return null;
		}
		
		/**
		 * Once the page has loaded (esp. including svgweb), then get the saved
		 * state from location.hash and initialize the tree with that data
		 */
		var tree;
		window.addEventListener('load', function(){
			var container = document.getElementById('treeContainer');
			try {
				container.innerHTML = '';
				
				//Get the saved tree data from the location.hash
				var hashData = parseHash();
				if(hashData)
					data = hashData;
				
				tree = new TreeDrawer(container, data.root);
				
				tree.draw();
			}
			catch(e){
				container.innerHTML = '<em style="color:red">Unable to initialize SVG Tree: ' + e.message + '.</em>';
				console.error(e);
			}
			
				
			//Watch for change in location.hash and
			function monitorBookmark(e){
				if(e && e.type)
					clearInterval(interval);
				var data = parseHash();
				if(data){
					if(data.labelStyle)
						tree.labelStyle = data.labelStyle;
					if(data.branchStyle)
						tree.branchStyle = data.branchStyle;
					if(data.root)
						tree.populate(data.root);
				}
			}
			window.addEventListener('hashchange', monitorBookmark, false);
			var prevHash = location.hash;
			var interval = setInterval(function(){
				if(location.hash != prevHash){
					prevHash = location.hash;
					monitorBookmark();
				}
			}, 100)
			
		}, false);
		
		function bookmarkTree(){
			var hash = encode64(
				compress(
					JSON.stringify({root:tree.root, labelStyle:tree.labelStyle, branchStyle:tree.branchStyle})
				, MaxWindowLength)
			);
			window.location.hash = hash;
		}
		
		//]]>
		</script>
		
		<fieldset style="display:none;position:absolute; right:10px ; bottom: 10px; background:white;">
			<legend>Tree Options</legend>
			<p>
				Branch color:
				<button type="button" onclick="tree.branchStyle.stroke = 'black'; tree.draw();" style='color:black;'>black</button>
				<button type="button" onclick="tree.branchStyle.stroke = 'red'; tree.draw();" style='color:red;'>red</button>
				<button type="button" onclick="tree.branchStyle.stroke = 'blue'; tree.draw();" style='color:blue;'>blue</button>
			</p>
			<p>
				Font size:
				<button type="button" onclick="tree.labelStyle.fontSize = 15; tree.draw();" style='font-size:15px;'>15px</button>
				<button type="button" onclick="tree.labelStyle.fontSize = 25; tree.draw();" style='font-size:25px;'>25px</button>
				<button type="button" onclick="tree.labelStyle.fontSize = 35; tree.draw();" style='font-size:35px;'>35px</button>
			</p>
			<p>
				Branch height:
				<button type="button" onclick="tree.branchStyle.height = 15; tree.draw();" style='height:15px;'>15px</button>
				<button type="button" onclick="tree.branchStyle.height = 25; tree.draw();" style='height:25px;'>25px</button>
				<button type="button" onclick="tree.branchStyle.height = 35; tree.draw();" style='height:35px;'>35px</button>
			</p>
			<p><button type="button" onclick="bookmarkTree()">Save Tree to location hash</button></p>
		</fieldset>
		
		
		<!--
				<svg
				   xmlns="http://www.w3.org/2000/svg"
				   xmlns:xlink="http://www.w3.org/1999/xlink"
				   version="1.1" baseProfile="full"
				   style="border:solid 1px red;"
				   width="200"
				   height="200">
				   
					<rect x="25" y="25" 
							  id="myRect" 
							  rx="0.6" ry="0.6" 
							  width="150" height="150" 
							  fill="green" 
							  stroke="yellow" stroke-width="8"/>
					
				</svg>
		-->
		<hr />
		<footer>
			<address><a href="http://weston.ruter.net/" rel="author">Weston Ruter</a></address>
		</footer>
	</body>
</html>